import React, { useEffect, useState } from 'react'

import { Label, RadioGroup, Radio, View, Text, Navigator } from '@tarojs/components'
import { useDidShow, useReady } from '@tarojs/taro'
import { walletApi } from '../../../services/UserWallet'

import './index.scss'
import GlobalData from '../../../global'

export default (props) => {
    let [isFirst, setisFirst] = useState(true)
    let [balance, setbalance] = useState(0)
    let [channel, setChannel] = useState(2)
    useEffect(() => {
        props.onChange(channel)
    })

    useReady(() => {
        walletApi().then(wallet => {
            if(wallet) {
                GlobalData.wallet = wallet
                setbalance(wallet.amount + wallet.rewardAmount)
            }
        })
    })

    useDidShow(() => {
        if(isFirst) {
            setisFirst(false)
        }else {
            if(GlobalData.wallet) {
                setbalance(GlobalData.wallet.amount + GlobalData.wallet.rewardAmount)
            }
            
        }
    })

    return (
        <RadioGroup onChange={(e) => setChannel(e.detail.value) }>
            {/* <View className='pay-option'>
                <Label className='example-body__label' for='1' key='1'>
                    <Radio className='radio' id='1' value='1' checked={channel == 1}></Radio><Text className='pay-name'>微信支付</Text>
                </Label>
            </View> */}
            <View className='pay-option link'>
                <Label className='example-body__label' for='2' key='2'>
                    <Radio className='radio' id='2' value='2' checked={channel == 2}></Radio><Text className='pay-name'>余额支付</Text><Text className='color-0265ff'>（剩余：{balance.toFixed(2)}元）</Text>
                </Label>
                <Navigator className='charge-tips f-24 color-0ab885' url='/userClient/pages/wallet/index'>充值更优惠</Navigator>
            </View>
        </RadioGroup>
    )
}